<template>
    <!-- 这是上面图表二的 -->
    <div id="posage" style="width: 100%;height:600px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
    data() {
        return {
            DataList: [],
            yuanShuJu: [
                { count: 7400, suoshuhangye: '18-25岁' },
                { count: 9800, suoshuhangye: '26-35岁' },
                { count: 3200, suoshuhangye: '36-45岁' },
                { count: 3000, suoshuhangye: '46-55岁' },
                { count: 2834, suoshuhangye: '56岁及以上' }
            ],
        };
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        // 请求接口，获取数据
        getDataList() {
            this.DataList = this.yuanShuJu.map(items => {
                return {
                    value: items.count,
                    name: items.suoshuhangye,
                };
            });
            console.log(this.DataList, 'this.DataList');
            this.initCharts();
        },
        // 饼图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("posage"));
            // 实现响应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)', // 提示框格式：数据名称、数据值、百分比
                },
                legend: {
                    orient: 'horizontal', // 图例水平排列
                    top: 'top',           // 图例位置在顶部
                    left: 'center',       // 图例水平居中
                    textStyle: {
                        color: '#fff',   // 图例文字颜色
                    },
                },
                series: [
                    {
                        name: '年龄段占比', // 系列名称
                        type: 'pie',       // 图表类型：饼图
                        radius: '50%',     // 设置半径为50%，形成标准饼图
                        center: ['50%', '27%'], // 图表中心位置
                        data: [...this.DataList], // 使用动态生成的数据
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10, // 阴影模糊尺寸
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
                            },
                        },
                        label: {
                            show: true, // 显示标签
                            position: 'outside', // 标签显示在扇区外部
                            formatter: '{b}: {d}%', // 显示名称和百分比
                            fontSize: 12, // 字体大小
                            color: '#008c8c', // 文字颜色
                        },
                        labelLine: {
                            show: true, // 显示引导线
                            length: 15, // 引导线第一段长度
                            length2: 30, // 引导线第二段长度
                            lineStyle: {
                                width: 1, // 引导线宽度
                                color: '#aaa', // 引导线颜色
                            },
                        },
                    },
                ],
            };

            myChart.setOption(option);
        },
    },
};
</script>

<style scoped>
#posage {
    /* height: 600px; */
    margin-top: 10px;

}
</style>